<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>案件数据分析系统</title>
    <meta name="keywords" content="案件数据分析系统" />
    <meta name="description" content="案件数据分析系统" />
    <link rel="shortcut icon" href="favicon.ico" />

    <!-- 引入公共css -->
    <#include "/inc/header.ftl"/>

    <link rel="stylesheet" href="/css/leaflet.css" />
    <!-- 引入 Leaflet 脚本  -->
    <script src="/js/leaflet.js"></script>
    <link  rel="stylesheet" href="/css/leaflet-geoman.css" />
    <script src="/js/leaflet-geoman.min.js"></script>

    <style>

    </style>
</head>

<body class="gray-bg">

<div class="main-container container-fluid">
    <div class="page-container">

        <div class="absolute-add">
            <a class="btn btn-md btn-primary search-btn" href="/wb/map/graph/preview?area=${area!''}">
                返回
            </a>
        </div>

        <div id="map">

        </div>

        <#--<div class="col-sm-3 row row m-t-md">-->

            <#--<form method="get" class="form-horizontal">-->
                <#--<input type="hidden" value="" class="tx">-->
                <#--<div class="form-group">-->
                    <#--<label class="col-sm-3 control-label">*所属行政区</label>-->

                    <#--<div class="col-sm-9">-->
                        <#--<select class="form-control">-->
                            <#--<option>行政区1</option>-->
                            <#--<option>行政区2</option>-->
                            <#--<option>行政区3</option>-->
                            <#--<option>行政区4</option>-->
                            <#--<option>行政区5</option>-->
                        <#--</select>-->
                    <#--</div>-->
                <#--</div>-->
                <#--<div class="hr-line-dashed"></div>-->

                <#--<div class="form-group">-->
                    <#--<label class="col-sm-3 control-label">区域名称</label>-->

                    <#--<div class="col-sm-9">-->
                        <#--<input type="text" placeholder="请填写区域名称" class="form-control tx-name">-->
                    <#--</div>-->
                <#--</div>-->
                <#--<div class="hr-line-dashed"></div>-->

                <#--<div class="hr-line-dashed"></div>-->

                <#--<div class="form-group">-->
                    <#--<div class="col-sm-offset-2">-->
                        <#--<button class="btn btn-primary" type="button">保存</button>-->
                        <#--<a class="btn btn-default" href="/wb/map/graph/preview?area=${area!''}">返回</a>-->
                    <#--</div>-->
                <#--</div>-->
            <#--</form>-->

        <#--</div>-->

    </div>
</div>
<!-- 引入公共js -->
<#include "/inc/footer.ftl"/>
</body>
<script>
    //初始化地图容器对象，设置地图中心点与缩放级别
    const map = L.map('map');
    let canClick = false;
    $(document).ready(function () {
        //加载星图地球影像图层
        //https://tiles1.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=29fbc555c8331c640b6c804dce954c4ad2bbf97a96a1c72b510344f4d87ae7e2
        //Leaflet_1.7.1/tiles/{z}/{x}/{y}.jpg

        //file:///E:/wb/wlmq/10/758/375.png
        const imgLayer = L.tileLayer('/external/{z}/{x}/{y}.png', {
            minZoom: 6,
            maxZoom: 18
        }).addTo(map);


        // add Leaflet-Geoman controls with some options to the map
        map.pm.addControls({
            position: 'topleft',
            drawCircleMarker: false,
            rotateMode: false,
            drawPolyline:false,
            drawRectangle:false,
            cutPolygon:false,
            dragMode:false,
            editMode:true,
            drawMarker:false,
            drawText:false,
            removalMode:true
        });
        map.setView([${dimension!43.863733}, ${longitude!87.583393}], 13);
        map.pm.setLang("zh");

        map.on("pm:create", (e) => {
            var polygon = e.layer;
            var paramsJson = getObj(e);
            $.ajax({
                contentType: 'application/json;charset=utf-8', //设置请求头信息
                url: '/wb/map/graph/create',
                type: 'POST',
                data: JSON.stringify(paramsJson),//数据，这里使用的是Json格式进行传输
                dataType: 'JSON',
                success: function (data) {
                    if (data.status == "200") {
                        // 将后端返回的 ID 存储在图形对象的自定义属性中
                        polygon.options.id = data.data;
                    } else {
                        parent.layer.alert("发生异常!");
                    }
                }
            });

            e.layer.on("pm:edit", (e2) => {
                var paramsJson = getObj(e2);
                paramsJson.id = e2.layer.options.id;
                update(paramsJson)
            });
            e.layer.on('click', (e3) => {
                location.href = "/wb/map/graphAttr/create?graphId=" + e3.target.options.id
            })
        });

        map.on("pm:remove", (event) => {
            var id = event.layer.options.id
            layer.confirm('您确定要删除吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                layer.close(layer.index);
                $.ajax({
                    url : '/wb/map/graph/delete',
                    type : 'GET',
                    dataType: "json",
                    data : {'id':id},
                    success : function(result) {
                        layer.close(layer.index);
                        if(result.status ==200){
                            map.eachLayer(function (layer) {
                                if (layer.options.id === id) {
                                    map.removeLayer(layer);
                                }
                            });
                            swal({title:"删除成功",text:"",type:"success"});
                        }else{
                            event.layer.addTo(map); // 如果取消删除，则重新添加图层
                            swal("删除失败", result.msg);
                        }
                    },
                    error : function(result) {
                        event.layer.addTo(map); // 如果取消删除，则重新添加图层
                        swal("删除失败","","error");
                    }
                });
            }, function(){
                // 用户点击了"取消"按钮，可以选择不执行任何操作
                event.layer.addTo(map); // 如果取消删除，则重新添加图层
            });
        });

        map.on("pm:globalremovalmodetoggled", (e) => {
            canClick = canClick == false;
        });

        map.on("pm:globaleditmodetoggled", (e) => {
            console.log(e);
            canClick = canClick == false;
        });

        $("body").on("click", ".proposal", function(event){
            $(".search-input").val($(event.target).text());
            $(".proposal-list").html("");
        });

        $(".search-input").on("keyup", function(){
            $(".proposal-list").html('<li class="proposal">结果1</li><li class="proposal">结果2</li><li class="proposal">结果3</li><li class="proposal">结果4</li>');
        });

        $(".search-btn").on("click", function(){
            map.setView([28.12, 112.59], 9);
        });


        //初始化多边形
        $.ajax({
            contentType: 'application/json;charset=utf-8', //设置请求头信息
            url: '/wb/map/graph/previewGraph',
            type: 'POST',
            data: {},//数据，这里使用的是Json格式进行传输
            dataType: 'JSON',
            success: function (data) {
                if (data.status == "200") {
                    var polygons = data.data.polygons;
                    for (let i = 0; i < polygons.length; i++) {
                        const html = '<div class="label-content">' + polygons[i].name + '</div>';
                        // 创建一个 DivIcon，用于显示带有文本的长方形
                        const labelIcon = L.divIcon({
                            className: 'custom-label', // 自定义样式
                            html: html, // 包含文本的 HTML
                            iconSize: [100, 30], // 长方形的大小
                            iconAnchor: [50, 15] // 图标的锚点（使其居中）
                        });
                        const polygon = L.polygon(JSON.parse(polygons[i].areaJson), {
                            color: polygons[i].color,
                            fillColor: polygons[i].fillColor,
                            fillOpacity:polygons[i].fillOpacity
                        }).on('click', (e) => {
                            goCreate(e.target.options.id)
                        }).on("pm:edit", (e) => {
                            var paramsJson = getObj(e);
                            paramsJson.id = e.layer.options.id;
                            update(paramsJson)
                        }).bindTooltip("<span>案件数量 : " + polygons[i].caseNum +  "</span></br>人员数量 : " + polygons[i].userNum + "</br>线索数量 : " + polygons[i].clueNum)
                        .openTooltip().addTo(map);

                        polygon.options.id = polygons[i].id;
                        // 获取多边形的边界框
                        const bounds = polygon.getBounds();
                        // 计算边界框的中心点
                        const center = bounds.getCenter();
                        // 创建标记并将 DivIcon 添加为图标
                        const marker = L.marker(center, { icon: labelIcon, name : polygons[i].name, id : polygons[i].id}).addTo(map);
                        marker.on('click', function(e) {
                            goCreate(this.options.id)
                        });
                    }

                    var circles = data.data.circles;
                    for (let i = 0; i < circles.length; i++) {
                        const html = '<div class="label-content">' + circles[i].name + '</div>';
                        // 创建一个 DivIcon，用于显示带有文本的长方形
                        const labelIcon = L.divIcon({
                            className: 'custom-label', // 自定义样式
                            html: html, // 包含文本的 HTML
                            iconSize: [100, 30], // 长方形的大小
                            iconAnchor: [15, 15] // 图标的锚点（使其居中）
                        });
                        //初始化圆
                        const circle = L.circle(JSON.parse(circles[i].areaJson), {
                            color: circles[i].color,
                            fillColor: circles[i].fillColor,
                            fillOpacity: circles[i].fillOpacity,
                            radius: circles[i].paramJson
                        }).on('click', (e) => {
                            goCreate(e.target.options.id)
                        }).on("pm:edit", (e2) => {
                            var paramsJson = getObj(e2);
                            paramsJson.id = e2.layer.options.id;
                            paramsJson.paramJson = e2.layer.getRadius();
                            update(paramsJson)
                        }).bindTooltip("<span>案件数量 : " + circles[i].caseNum +  "</span></br>人员数量 : " + circles[i].userNum + "</br>线索数量 : " + circles[i].clueNum).openTooltip().addTo(map);

                        circle.options.id = circles[i].id;
                        // 获取多边形的边界框
                        const bounds = circle.getBounds();
                        // 计算边界框的中心点
                        const center = bounds.getCenter();
                        // 创建标记并将 DivIcon 添加为图标
                        const marker = L.marker(center, { icon: labelIcon, name : circles[i].name, id : circles[i].id}).addTo(map);
                        marker.on('click', function(e) {
                            goCreate(this.options.id)
                        });
                    }
                }
            }
        });
    });

    function goCreate(graphId) {
        if (!canClick){
            location.href = "/wb/map/graphAttr/create?graphId=" + graphId
        }
    }

    function update(paramsJson) {
        $.ajax({
            contentType: 'application/json;charset=utf-8', //设置请求头信息
            url: '/wb/map/graph/modify',
            type: 'POST',
            data: JSON.stringify(paramsJson),//数据，这里使用的是Json格式进行传输
            dataType: 'JSON',
            success: function (data) {
                if (data.status == "200") {
                } else {
                    parent.layer.alert("发生异常!");
                }
            }
        });
    }

    function getObj(e) {
        var paramsJson = {
            "areaName" : "${area!''}"
        }
        var geo = e.layer.toGeoJSON();
        if (e.shape == "Circle") {
            var coordinates = geo.geometry.coordinates;
            // 调整顺序，将经度和纬度位置互换
            var areaJson = [coordinates[1], coordinates[0]];
            paramsJson.areaJson = JSON.stringify(areaJson);
            paramsJson.graphType = geo.geometry.type;
            paramsJson.paramJson = e.layer.getRadius();
        }else if(e.shape == "Polygon"){
            var coordinates = geo.geometry.coordinates;
            paramsJson.graphType = geo.geometry.type;
            // 调整顺序，将经度和纬度位置互换
            areaJson = coordinates.map(function(linearRing) {
                return linearRing.map(function(coord) {
                    return [coord[1], coord[0]]; // 将经度和纬度位置互换
                });
            });
            paramsJson.areaJson = JSON.stringify(areaJson);
        }

        return paramsJson;
    }


</script>

<script src="/js/page/common.js"></script>
</html>
